import { Toast } from '@ant-design/react-native'
import { useNavigation } from '@react-navigation/native'
import React, {useState} from 'react'
import axios from 'axios'
import { 
  View,
  Text, 
  StyleSheet,
   Image, 
   TextInput, 
   Button,
   Keyboard, 
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
   ScrollView,
   SafeAreaView
  } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Header } from '../../components'
import { pxToPt, checkMobile, checkEmail, checkName, checkPassword, GET } from '../../utils'



export default function index() {
const [username, setUsername] = useState('admins')
const [mobile, setmobile] = useState('18737252813')
const [password, setPassword] = useState('123qwe')
const [rePassword, setRePassword] = useState('123qwe')
const [email, setEmail] = useState('1156606721@qq.com')
const navigation = useNavigation()


  const submit = ()=> {
   
   if(!checkEmail(email)){
     Toast.fail('邮箱格式不正确');
     return
   }
   if(!checkMobile(mobile)){
    Toast.fail('电话号码格式错误');
     return
   }
   if(!checkName(username)){
    Toast.fail('仅允许2-20个字符的用户名');
     return
   }
   if(!checkPassword(password)){
    Toast.fail('只能输入6-20个字母、数字、下划线');
     return
   }
   if(!checkPassword(rePassword)||(rePassword!==password)){
     Toast.fail('密码不一致')
     return
   }

   GET(`/users/count/${mobile}/${email}`, {token: '123q2weasdasda'}).then(res=>{
     if(res.msg==false){
       Toast.fail('该号码或者邮箱已经注册了')
     }else{
      navigation.navigate('VerifyCode', {username,email, mobile, password, rePassword})

     }
   })
  
   
  
  }
  return (
    <SafeAreaView style={styles.wrapper}>
      <Header
        LeftIcon='ZUO'
        leftPress={()=> {navigation.goBack()}}
      />
      <View style={styles.container} >  
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <KeyboardAvoidingView behavior='position' >
              <ScrollView>
                <Text style={styles.title}>
                  Create Account
                </Text>
                <View style={styles.form}>
                  <View style={styles.formItem}>
                    <Text style={styles.label}>full name</Text>
                    <View style={styles.theHidden}></View>
                    <TextInput 
                      keyboardType='number-pad'
                      style={styles.formItemInput} 
                      value={username}
                      onChangeText={text=>setUsername(text)}
                      />
                  </View>
                  <View style={styles.formItem}>
                    <Text style={styles.label}>phone</Text>
                    <View style={styles.theHidden}></View>
                    <TextInput
                    value={mobile}
                    textContentType='telephoneNumber'
                      keyboardType='number-pad'
                      style={styles.formItemInput}
                      onChangeText={text=>setmobile(text)}
                      />
                  </View>
                  <View style={styles.formItem}>
                    <Text style={styles.label}>password</Text>
                    <View style={styles.theHidden}></View>
                    <TextInput 
                      value={password}
                      textContentType='password'
                      secureTextEntry={true}
                      onChangeText={text=>setPassword(text)}
                      style={styles.formItemInput}
                      />
                  </View>
                  <View style={styles.formItem}>
                    <Text  style={styles.label}>repassword</Text>
                    <View style={styles.theHidden}></View>
                    <TextInput
                      secureTextEntry={true}
                      value={rePassword}
                      textContentType='password'
                      style={styles.formItemInput}
                      onChangeText={text=>setRePassword(text)} 
                    />
                  </View>
                  <View style={styles.formItem}>
                    <Text style={styles.label}>email</Text>
                    <View style={styles.theHidden}></View>
                    <TextInput
                    value={email}
                    textContentType='emailAddress'
                      style={styles.formItemInput}
                      onChangeText={text=>setEmail(text)}
                      />
                  </View>
                  <TouchableOpacity onPress={submit}>
                    <View style={styles.btnStyle}>
                      <Text>Create</Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </ScrollView>
            </KeyboardAvoidingView>
        </TouchableWithoutFeedback>
        <View style={styles.footer}>
          <Text style={styles.link}>Don’t have an account? <Text  onPress={ ()=>navigation.navigate('Login')} style={styles.jump}>SIGN IN</Text></Text>
        </View>
    </View>
  </SafeAreaView>
  )
}
const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#212529',

  },
  container: {
    flex: 1,
    paddingLeft: pxToPt(25),
    paddingRight: pxToPt(25),
  },
 
  title: {
    fontSize: pxToPt(30),
    fontWeight: 'bold',
    color: '#FFF',
    paddingBottom: 0
  },
  form: {
    marginTop: pxToPt(40),
  },
  formItem: {
    width: '100%',
    height: pxToPt(60),
    borderBottomWidth: pxToPt(0.5),
    borderColor: 'rgba(255, 255, 255, 0.1)',
    flexDirection: 'row',
    alignItems:'flex-end'
  },
  label:{
    lineHeight: pxToPt(30),
    fontSize: pxToPt(13),
    width: pxToPt(70),
    color: '#fff',
  },
  theHidden: {
    width:pxToPt(20),
    height: pxToPt(20),
    backgroundColor: '#212529',
    position: 'relative',
    bottom: pxToPt(-1)
  },
  formItemInput: {
    flex: 1,
    height:pxToPt(40),
    color: '#fff',
    fontSize: pxToPt(13),
    paddingLeft: pxToPt(10)
  },
  btnStyle: {
    width: pxToPt(230),
    height: pxToPt(52),
    borderRadius: pxToPt(25),
    backgroundColor: '#6AC4AC',
    marginTop: pxToPt(30),
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  footer: {
    height: pxToPt(60),
    width: '100%',
    borderTopWidth: pxToPt(0.2),
    borderTopColor: 'rgba(255, 255, 255, 0.1)',
  },
  link: {
    textAlign: 'center',
    lineHeight: pxToPt(60),
    fontSize: pxToPt(13),
    color: '#8A9EAD'
  },
  jump: {
    color: '#45E9BD'
  }
})
